<template>
	<view class="content">
		<view class="zhuige-friends">
			<view class="zhuige-block">
				<!-- 用户卡 基于发帖用户信息，增加用户列表专用 zhuige-friends-block -->
				<template v-if="rec_posts.length>0">
					<view v-for="(item, index) in rec_posts" :key="index"
						class="zhuige-social-poster-blcok zhuige-friends-block">
						<view class="zhuige-social-poster">
							<view class="zhuige-social-poster-avatar">
								<image mode="aspectFill" :src="item.items[0].image"></image>
							</view>
							<view class="zhuige-social-poster-info">
								<view>
									<text class="title">{{item.name}}</text>
									<view class="icons_text">
										<uni-icons type="phone" size="30rpx"></uni-icons>
										<text class="ecnu_text"> {{item.num}}</text>
									</view>
								</view>
								<view>
									<text class="introduct_text">{{item.introduction}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<zhuige-nodata v-if="loadedFollow" :tip="noDataTip"></zhuige-nodata>
				</template>
			</view>

			<uni-load-more v-if="cur_tab=='follow' && follows.length>0" :status="loadMoreFollow"></uni-load-more>
		</view>
	</view>
</template>

<script>
	/*
	 * 追格小程序
	 * 作者: 追格
	 * 文档: https://www.zhuige.com/docs/zg.html
	 * gitee: https://gitee.com/zhuige_com/zhuige_xcx
	 * github: https://github.com/zhuige-com/zhuige_xcx
	 * Copyright © 2022-2023 www.zhuige.com All rights reserved.
	 */
	import Constant from '@/utils/constants';
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';

	import ZhuigeTab from "@/components/zhuige-tab";
	import ZhuigeNodata from "@/components/zhuige-nodata";

	export default {
		data() {
			this.loginReload = false;

			return {
				tabs: [{
						id: 'follow',
						title: '关注'
					},
					{
						id: 'fans',
						title: '粉丝'
					},
				],
				cur_tab: 'follow',

				loadMoreFollow: 'more',
				follows: [],
				loadedFollow: false,

				loadMoreFan: 'more',
				fans: [],
				loadedFan: false,
                rec_posts: [],
				noDataTip: '哇哦，什么也没有',
			}
		},

		components: {
			ZhuigeTab,
			ZhuigeNodata
		},
	
		onLoad(options) {
			Util.addShareScore(options.source);

			if (options.user_id) {
				this.user_id = options.user_id;
			}

			if (options.tab == 'fans') {
				this.cur_tab = 'fans';
				this.loadFans();
			} else {
				this.loadFollows();
			}
            this.loadSetting();
			uni.$on('zhuige_event_user_login', this.onSetReload);
			uni.$on('zhuige_event_follow_user', this.onFlollowUser);
		},

		onUnload() {
			uni.$off('zhuige_event_follow_user', this.onFlollowUser);
			uni.$off('zhuige_event_user_login', this.onSetReload);
		},

		onShow() {
			if (this.loginReload) {
				this.loginReload = false;

				this.refresh();
			}

			// #ifdef MP-BAIDU
			swan.setPageInfo({
				title: '粉丝/关注_' + getApp().globalData.appName,
				keywords: getApp().globalData.appKeywords,
				description: getApp().globalData.appDesc,
			});
			// #endif
		},

		onShareAppMessage() {
			let path = 'pages/user/friend/friend?n=n';
			if (this.user_id) {
				path += '&user_id=' + this.user_id;
			}
			return {
				title: '粉丝/关注-' + getApp().globalData.appName,
				path: Util.addShareSource(path)
			};
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return {
				title: '粉丝/关注-' + getApp().globalData.appName,
			};
		},
		// #endif

		onReachBottom() {
			if (this.cur_tab == 'fans') {
				if (this.loadMoreFan == 'more') {
					this.loadFans();
				}
			} else { //follow
				if (this.loadMoreFollow == 'more') {
					this.loadFollows();
				}
			}
		},

		methods: {
			//----- event start -----
			/**
			 * 关注用户事件
			 */
			onFlollowUser(data) {
				this.refresh();
			},

			/**
			 * 重新加载事件
			 */
			onSetReload(data) {
				this.loginReload = true;
			},
			//----- event end -----

			/**
			 * 点击打开链接
			 */
			openLink(link) {
				Util.openLink(link);
			},

			/**
			 * 刷新
			 */
			refresh() {
				this.follows = [];
				this.loadMoreFollow = 'more';
				this.loadedFollow = false;

				this.fans = [];
				this.loadMoreFan = 'more';
				this.loadedFan = false;

				if (this.cur_tab == 'fans') {
					this.loadFans();
				} else { //follow
					this.loadFollows();
				}
			},

			/**
			 * 切换TAB
			 */
			clickTab(tab) {
				this.cur_tab = tab.id;

				if (this.cur_tab == 'fans') {
					if (this.fans.length == 0) {
						this.loadFans();
					}
				} else { //follow
					if (this.follows.length == 0) {
						this.loadFollows();
					}
				}
			},

			/**
			 * 点击关注用户
			 */
			clickFollowUser(user_id) {
				Rest.post(Api.URL('user', 'follow_user'), {
					user_id: user_id
				}).then(res => {
					if (res.code == 0) {
						uni.$emit('zhuige_event_follow_user', {
							user_id: user_id,
							is_follow: res.data.is_follow
						});
					} else {
						Alert.toast(res.message);
					}
				}, err => {
					console.log(err)
				});
			},

			/**
			 * 加载关注者
			 */
			loadFollows() {
				if (this.loadMoreFollow == 'loading') {
					return;
				}
				this.loadMoreFollow = 'loading';

				let params = {
					offset: this.follows.length
				};
				if (this.user_id) {
					params.user_id = this.user_id;
				}
				Rest.post(Api.URL('user', 'my_follows'), params).then(res => {
					this.follows = this.follows.concat(res.data.users);
					this.loadMoreFollow = res.data.more;
					this.loadedFollow = true;

					if (res.data.tip) {
						this.noDataTip = res.data.tip;
					} else {
						this.noDataTip = undefined;
					}
				}, err => {
					console.log(err)
				});
			},

		    /**
			 * 加载配置
			 */
			loadSetting() {
				let that = this
				uni.getStorage({
					key: Constant.GLOBAL_DATA,
					success: function (res) {
						if (res.data.rec_posts) {
							that.rec_posts = res.data.rec_posts.filter(item=> item.title.includes('咨询师'));
							that.rec_posts.forEach(
							   (item,index)=>{
								   var  temp=[];
								   temp=item.more_link.split('；');
								   item.name=temp[0];
								   item.num=temp[1];
								   item.introduction=temp[2];
							   }
							)
						}
					}
				});
			},

			/**
			 * 加载粉丝
			 */
			loadFans() {
				if (this.loadMoreFan == 'loading') {
					return;
				}
				this.loadMoreFan = 'loading';

				let params = {
					offset: this.fans.length
				};
				if (this.user_id) {
					params.user_id = this.user_id;
				}
				Rest.post(Api.URL('user', 'my_fans'), params).then(res => {
					this.fans = this.fans.concat(res.data.users);
					this.loadMoreFan = res.data.more;
					this.loadedFan = true;

					if (res.data.tip) {
						this.noDataTip = res.data.tip;
					} else {
						this.noDataTip = undefined;
					}
				}, err => {
					console.log(err)
				});
			},
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.zhuige-friends {
		padding: 0 20rpx;
	}

	.zhuige-friends-block {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.zhuige-friends-block:last-of-type {
		border: none;
	}

	.zhuige-social-opt {
		display: flex;
		flex-direction: row-reverse;
		width: 22% !important;
	}

	.zhuige-friends-block .zhuige-social-opt view {
		height: 60rpx;
		line-height: 60rpx;
		width: 140rpx;
		text-align: center;
		background: #F3f3f3;
		font-size: 28rpx;
		font-weight: 300;
		border-radius: 60rpx;
		color: #999999;
	}

	.zhuige-friends-block .zhuige-social-opt view.active {
		background: #010101;
		color: #FFFFFF;
	}

	.zhuige-friends-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	
	.zhuige-social-poster-info .title {
	    padding: 20rpx;
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #1A1A1A;
		line-height: 51rpx;
		font-weight:bold;
	}
	.zhuige-social-poster-info .icons_text{
		position: absolute; 
		right: 12rpx;
		padding: 0rpx 120rpx 20rpx 0rpx;
	}
	.zhuige-social-poster-info .icons_text .ecnu_text{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #1A1A1A;
		line-height: 48rpx;
	}
	
	.zhuige-social-poster-info .introduct_text {
	    font-size: 26rpx;
	    font-weight: 400;
	    color: #999999;
	    white-space: nowrap;
		padding-left: 20rpx;
	}
	
	.zhuige-social-poster-info view:nth-child(2) text:nth-child(2) {
	    margin: 0rpx;
	}
</style>
